<template>
    <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal" label-position="left" v-loading="loading">
        <el-form-item label="标题" required prop="title">
            <el-input v-model="form.title" placeholder="文章标题" size="small" clearable class="input"></el-input>
        </el-form-item>
        <el-form-item label="简介">
            <el-input type="textarea" v-model="form.summary" class="input"></el-input>
        </el-form-item>
        <el-form-item label="来源">
            <el-input type="text" v-model="form.source" class="input"></el-input>
        </el-form-item>
        <!-- http://jr1test.oss-cn-beijing.aliyuncs.com/upload/20201214/db2c70c7ac862230f1e5baba6d0447ae.png -->
        <el-form-item label="缩略图">
            <el-input v-model="form.image" placeholder="可留空，将从内容提取" size="small" clearable class="input"></el-input>
            <el-upload
            action="http://localhost/api/upload"
            :on-success="handleUploadSuccess"
            >
                <el-button type="text" size="large">
                    <i class="el-icon-upload"></i>
                </el-button>
                <template #tip>只能上传图片，不能超过1M</template>
            </el-upload>
        </el-form-item>
        <el-form-item label="关键词">
            <el-input v-model="form.keywords" placeholder="可留空，将从标题提取" size="small" clearable class="input">
               
            </el-input>
        </el-form-item>
        <el-form-item label="内容" required prop="content">
            <editor v-model="form.content" :init="init"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
    
   

</template>


<script>
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce'
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/link'
import 'tinymce/plugins/image'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/code'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/help'
import 'tinymce/plugins/wordcount'

// css
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.min.css'
import 'tinymce/skins/content/default/content.min.css'

//api
import { adminArticle } from "@/api/content.js"
import { mapMutations } from 'vuex'
export default {
    name: "ArticleAdd",
    components: {
        'editor': Editor,
    },
    data(){
        return {
            form: {
                title: "",
                summary: "",
                source: "",
                image: "",
                content: "",
                keywords: "",
            },
            rules: {
                title: [
                    { required: true, message: '请输入文章标题', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '请填写文章内容', trigger: 'blur' }
                ]
            },
            init: {
                language_url: '/tinymce/langs/zh_CN.js',// 语言包的路径
                language: 'zh_CN',//语言
                height: 300,//编辑器高度
                branding: false,//是否禁用“Powered by TinyMCE”
                menubar: true,//顶部菜单栏显示
                images_upload_url: "http://localhost/api/upload/tinymce",
                plugins: [
                'lists link image ',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste  help wordcount'
                ],
                toolbar:
                'undo redo | formatselect | bold italic backcolor | image\
                alignleft aligncenter alignright alignjustify | \
                bullist numlist outdent indent | removeformat | help'
            },
            loading: false,
        }
    },
    mounted(){
        tinymce.init({})
    },
    methods: {
        ...mapMutations('aa', [
            'unshiftArticle'
        ]),
        showContent(){
            console.log('content', this.content)
        },
        async onSubmit(){
            this.loading = true;
            if (this.form.title === "" || this.form.content == ""){
                this.$message({
                    showClose: true,
                    type: "error",
                    message: "请将标题、内容填写完整",
                })
                 this.loading = false;
                return;
            }
            let data = await adminArticle.add(this.form);
            this.loading = false;
            this.unshiftArticle(data.article)
            this.$message({
                showClose: true,
                type: 'success',
                message: "添加成功"
            })
            this.form = {
                title: "",
                summary: "",
                source: "",
                image: "",
                content: "",
                keywords: "",
            };
            console.log('res', data)
        },
        handleUploadSuccess(response){
            this.form.image = response.url
        },
        
    }
    
}
</script>

<style lang="scss" scope>
.article-table-container {
    margin: 0 auto;
    width: 95%;
    display: flex;
    flex-direction: column;
    background-color: #fdfdfd;
}
.input {
    max-width: 60%;
}
</style>